<template>
  <div class="background activity-detail" :style="{height: `${screenHeight}px`}">
    <!-- <mt-swipe :show-indicators="false">
      <mt-swipe-item>
        <img :src="detalData.image || defaultImg">
      </mt-swipe-item>
    </mt-swipe> -->
      <img style="width:100%;height:200px;" :src="detalData.image || defaultImg">
      <div class="activity-detail-information">
        <p class="activity-detail-information-title"><span>{{detalData.title || ''}}</span>
          <mt-badge class="activity-detail-information-title-margin" v-if="detalData.state == 'UN_START'" size="small" color="#ccc">未开始</mt-badge>
          <mt-badge class="activity-detail-information-title-margin" v-if="detalData.state == 'IN_PROGRESS'" size="small" type="warning">进行中</mt-badge>
          <mt-badge class="activity-detail-information-title-margin" v-if="detalData.state == 'END'" size="small" color="#ccc">已结束</mt-badge>
          <mt-badge class="activity-detail-information-title-margin" v-if="detalData.state == 'FULL'" size="small" color="#ccc">已满员</mt-badge>
          <mt-badge class="activity-detail-information-title-margin" v-if="detalData.state == 'CLOSE'" size="small" color="#ccc">已关闭</mt-badge>
          <mt-badge class="activity-detail-information-title-margin" v-if="isRecord == '0'" size="small" type="primary">已报名</mt-badge>
        </p>
        <ul>
          <li class="activity-detail-information-text"><span class="globalColor" style="font-size:30px;position:relative;top:-5px;">.</span><span class="activity-detail-information-title">报名时间：</span>{{detalData.registrationStartTime}} ~ {{detalData.registrationEndTime}}</li>
          <li class="activity-detail-information-text"><span class="globalColor" style="font-size:30px;position:relative;top:-5px;">.</span><span class="activity-detail-information-title">报名费用：</span>{{detalData.cost}}元</li>
          <li class="activity-detail-information-text"><span class="globalColor" style="font-size:30px;position:relative;top:-5px;">.</span><span class="activity-detail-information-title">报名人数：</span>{{detalData.joinNumber}}/{{detalData.maxNumber}}</li>
          <li class="activity-detail-information-text"><span class="globalColor" style="font-size:30px;position:relative;top:-5px;">.</span><span class="activity-detail-information-title">活动时间：</span>{{detalData.activityStartTime}} ~ {{detalData.activityEndTime}}</li>
          <li class="activity-detail-information-text"><span class="globalColor" style="font-size:30px;position:relative;top:-5px;">.</span><span class="activity-detail-information-title">活动地址：</span>{{detalData.address}}</li>
        </ul>
        <p class="activity-detail-information-name">发起人：<img class="activity-detail-information-name-img" :src="originatorData.avatar">&nbsp;<span>{{originatorData.nickName || ''}}</span><span v-if="isStart =='1'" style="float:right;margin-top: 16px;" @click="contactHer"><img style="width:20px;" src="@/assets/img/联系@2x.png"> 联系Ta</span></p>
      </div>
      <!-- 活动详情部分 富文本 -->
      <div class="activity-detail-introduce" v-html="detalData.detail">
      </div>

      <div class="activity-detail-peoples">
        <p class="activity-detail-peoples-t">已报名：<span class="globalColor">({{bmNum}})</span> </p> 
        <mt-loadmore v-if="applicantData.length>0" 
          ref="loadmore"
          :bottom-method="loadBottom" 
          :bottomDistance="0"
          :autoFill="false"
          bottomDropText=""
          bottomLoadingText=""
          :bottom-all-loaded="allLoaded">
          <ul>
            <li v-for="item in applicantData" :key="item.id">
              <div class="activity-detail-peoples-img">
                <img :src="item.registrationUser.avatar || defaultImg">
              </div>
              <div class="activity-detail-peoples-content">
                  <p><span>{{item.registrationUser.nickName || ''}}</span><span style="float:right">报名成功&nbsp;&nbsp;</span></p>
                  <p style="padding-top:10px;"><span style="font-size:14px;color:#ddd">{{item.createTime}}</span><span v-if="seeInfo" style="position: absolute;right: 0px;top: 20px;"><mt-button plain type="primary" size="small" @click="seeDetail(item.id)">查看数据</mt-button></span></p>
              </div>
            </li>
            <span style="font-size:12px;color:#bbb;padding: 2px;" v-if="!allLoaded">上拉加载更多↑</span>
            <span style="font-size:12px;color:#bbb;padding: 2px;" v-if="allLoaded">—— 你触及到我的底线啦~ ——</span>
          </ul>
        </mt-loadmore>
        <p v-else class="activity-detail-peoples-bg">还没有人参与~</p>
      </div>
   
    <div class="activity-detail-btn">
        <div class="activity-detail-btn-btn1" @click="goShare">
          <img src="@/assets/img/活动详情-普通用户_03.png">
          <p>分享</p>
        </div>
        <div v-if="isCollect == '1'" class="activity-detail-btn-btn1" @click="Collection">
          <img src="@/assets/img/活动详情-普通用户_06.png">
          <p>收藏</p>
        </div>
        <div v-if="isCollect == '0'" class="activity-detail-btn-btn1" @click="Collection">
          <img src="@/assets/img/活动详情-普通用户_05.png">
          <p>取消收藏</p>
        </div>
        <div class="activity-detail-btn-btn" @click="goSignUp" :class="detalData.state=='IN_PROGRESS' || isRecord == '0'?'activity-detail-btn-but2':'activity-detail-btn-but1'">
          {{btnTitle}}
        </div>
    </div>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <mt-actionsheet
      :actions="actions2"
      v-model="concatVisible">
    </mt-actionsheet>
    <mt-popup v-model="popupVisible" modal="true" position="center">
        <div style="width:250px;height:100%;text-align:center;padding:20px;">
          <p>添加发起者微信</p>
          <div style="overflow:auto;display:flex">
            <div style="float:left;flex:1;">
              <img style="width:50px;height:50px;margin-top:15px;" :src="originatorData.avatar">
            </div>
            <div style="flex:3;float:left;text-align:left;margin:20px 0px;">
              <div>{{originatorData.nickName || ' '}}</div>
              <div style="color:#ccc"><span>微信号：</span><span>{{originatorData.wechatNumber || ''}}</span></div>
            </div>
          </div>
          <div style="background-color:#FEBF00;clear:both;padding:8px 10px;color:white;border-radius:5px;"
          v-clipboard:copy="originatorData.wechatNumber"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          >一键复制微信号</div>
        </div>
    </mt-popup>
    <!-- 海报弹窗 -->
    <mt-popup v-model="posterVisible" modal="true" position="center">
        <div style="min-width:250px;min-height:100px;width:90%;text-align:center;">
          <img style="width:100%;" :src="posterImg" alt="分享海报生成失败">
        </div>
    </mt-popup>
    <div v-if="showShareImg" class="activity-detail-showShareImg" @click="showShareImgs"><img src="@/assets/img/ts-fx.png"></div>
  </div>
</template>

<script>
import wx from 'weixin-jsapi'
import { getActivityDetailData, registrationRecordList, getCurrentUser,saveCollect,originatorInfo,wxconfig,selectNumByUserId, getposters} from '@/api/request.js';
import { setStore,getStore } from '@/assets/js/utils.js';
import { appid, globalUrl, imgUrl } from '@/assets/js/const.js';
import { Button, Badge, Loadmore, Actionsheet, Popup } from 'mint-ui'; //Swipe, SwipeItem,
import defaultImg from '@/assets/img/no_img.png';
import defaultPic from '@/assets/img/weChat_Pic.png';

export default {
  name: 'activityDetail',
  data() {
    return {
      seeInfo:false, // 是否能查看报名人详情
      posterVisible:false, // 海报弹窗
      showShareImg:false,
      allLoaded:false, //是否加载更多报名人数 
      defaultImg:defaultImg,
      defaultPic:defaultPic, //默认头像
      userId:'',//当前用户id
      user:{},
      isCollect:1, // 是否收藏  0是   1否
      isRecord: 1, // 是否报名
      isStart: 1,  // 是否发起人
      btnTitle:'', //报名按钮文字
      hdId:'', //活动id  报名用
      hdCost:0, //活动金额  报名用
      pageNo:1,
      detalData: {},
      applicantData: [],
      mobile:'', //发起人电话
      originatorData:{
        avatar:'',
        nickName:'',
        wechatNumber:''
      }, //发起人
      sheetVisible:false, //是否显示分享弹窗
      actions:[{name:'微信好友',type: 1,method:this.shareBtn},{name:'分享海报',type: 2,method:this.shareBtn}],
      concatVisible:false, //是否显示 ‘联系他’
      actions2:[{name:'加微信',type: 1,method:this.addWechatNum},{name:'紧急联系人',type: 2,method:this.callHer}],
      popupVisible:false,  //是否显示复制微信
      posterImg:'',
      bmNum:0
    }

  },
  created(){
    let userId = getStore('userId');
    let user = getStore('user');
    if(userId && user){
      this.userId = userId;
      this.user = user;
    }else{
      //跳转登录
      var fhUrl = window.location.href;
      setStore('fhUrl', fhUrl);
      this.$router.push('/wxLogin')
    }
    this._getActivityDetailData();
    this._getCurrentUser();
    this.loadBottom();
    this._selectNumByUserId();
  },
  computed: {
      screenHeight () {
        return window.innerHeight-40-55;
      }
  },
  mounted() {
      this.$store.commit('UPDATE_PAGE_TITLE', '活动详情')
      this.$store.commit('UPDATE_FOOTER', false)
  },
  methods: {
    //报名人数
    _selectNumByUserId(){
      let that = this; 
      selectNumByUserId(this.$route.query.id).then(res => {
        if (res.code == 1) {
          that.bmNum = res.data;
        }
      }).catch(err => console.log(err))
    },
    showShareImgs(){
      this.showShareImg = false
    },
    //点击分享
    shareBtn (e) {
      let that = this;
      if(e.type == 1){
          wxconfig(globalUrl+'/activityDetail?id='+that.$route.query.id).then(res => {
            if (res.code == 1) {
              that.showShareImg = true; //显示分享图标
              let data = res.data
                wx.config({
                debug: false, // 开启调试模式   
                appId: appid, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见附录1
                jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 
              });
              wx.ready(function() {
                wx.onMenuShareTimeline({
                  title: " - 来自" + that.user.nickname + "的分享", // 分享标题
                  link: globalUrl+"/activityDetail?id="+that.$route.query.id, // 分享链接
                  imgUrl: that.detalData.image || '', // 分享图标
                  success: function () {
                    // 用户确认分享后执行的回调函数
                  },
                  cancel: function () {
                      // 用户取消分享后执行的回调函数
                  }
                });
                wx.onMenuShareAppMessage({
                    title: " - 来自" + that.user.nickname + "的分享", // 分享标题
                    desc: '无限精彩活动等你来报名~', // 分享描述
                    link: globalUrl+"/activityDetail?id="+that.$route.query.id,
                    imgUrl: '', // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: that.detalData.image || '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });
              });
            }
          }).catch(err => console.log(err)) 

      }else if(e.type == 2){
        that._getposters();
      }
    },
    //活动海报
    _getposters(){
      let that = this;
      getposters(this.userId, globalUrl+'/activityDetail?id='+this.$route.query.id).then(res => {
        if (res.code == 1) {
          that.posterVisible = true;
          that.posterImg = imgUrl + res.data;
        }else{
          that.$Toast('分享海报生成失败！')
        }
      }).catch(err => console.log(err))
    },
    //获取活动列表数据
    _getActivityDetailData () {
      let that = this;
      getActivityDetailData(this.$route.query.id).then(res => {
        if (res.code == 1) {
          that.detalData = res.data;
          that.hdId = res.data.id;
          that.hdCost = res.data.cost;
          that._originatorInfo(res.data.userId)
        }
      }).catch(err => console.log(err))
    },
     //下拉获取报名人数 数据
    loadBottom() {
      let that = this;
      registrationRecordList(this.$route.query.id,this.pageNo).then(res => {
        if (res.code == 1) {
          console.log('报名人数 数据',res.data)
          that.pageNo++;
          that.applicantData.push.apply(that.applicantData,res.data); 
          if(res.data.length<10){
              that.allLoaded = true; // 数据已全部获取完毕
          }
        }
        that.$refs.loadmore.onBottomLoaded();
      }).catch(err => console.log(err)) 
    },
    //获取当前用户数据
    _getCurrentUser(){
      let that = this;
      getCurrentUser(this.userId,this.$route.query.id).then(res => {
        if (res.code == 1) {
          console.log('当前用户报名数据',res.data)
            that.isCollect = res.data.isCollect;
            that.isRecord = res.data.isRecord;
            that.isStart = res.data.isStart;
            if(that.isStart == 0){
              that.seeInfo=true;
            }else{
              that.detalData.jurisdiction == 'INITIATOR'? that.seeInfo=false: that.seeInfo=true;
            }
            if(that.isRecord == 0){
              that.btnTitle = '查看凭证';
              
            }else{
                if(that.detalData.state == "UN_START"){
                  that.btnTitle = '报名未开始'
                }else if(that.detalData.state == "IN_PROGRESS"){
                  that.btnTitle = '我要报名'
                }else if(that.detalData.state == "END"){
                  that.btnTitle = '报名已结束'
                }else if(that.detalData.state == "FULL"){
                  that.btnTitle = '已满员'
                }else if(that.detalData.state == "CLOSE"){
                  that.btnTitle = '已关闭'
                }
            }
        }
      }).catch(err => console.log(err))
      
    },
    //联系他
    contactHer(){
      this.concatVisible = true;
    },
    addWechatNum(){
      this.popupVisible = true;
    },
    callHer(){
      window.location.href = `tel:${this.mobile}`
    },
    //查看报名人的数据详情
    seeDetail(id){
      this.$router.push({ name:'personalInformation', params: { id: id}})
    },
    //分享
    goShare(){
      this.sheetVisible = true;
    },
    //收藏
    Collection(){
      let that = this;
      saveCollect(this.userId,this.$route.query.id).then(res => {
          that.$Toast(res.msg)
          if (res.code == 1) {
            that.isCollect =res.data
          }
      }).catch(err => console.log(err))

    },
    //获取发起人信息
    _originatorInfo(userId){
      let that = this;
      originatorInfo(userId).then(res => {
        if (res.code == 1) {
          if(res.data){
              res.data.avatar = res.data.avatar || defaultPic;
              res.data.nickName = res.data.nickName || '';
              res.data.wechatNumber = res.data.wechatNumber || '';
              that.originatorData = res.data;
              that.mobile = res.data.mobile || '';
            }
        }
      }).catch(err => console.log(err))
    },
    //去报名
    goSignUp(){
      if(this.isRecord == 0){
        // 跳转查看凭证页面
        // this.$Toast('跳转失败！')
        this.$router.push({name:'VoucherInfo', params: {id:this.hdId} });
      }else{
        if(this.detalData.state == "IN_PROGRESS"){
          this.$router.push({name:'registrationInformation', params: { id:this.hdId, cost:this.hdCost} });
        }else{
          return false;
        }
      }
    },
    onCopy(){
      this.popupVisible = false;
      this.$Toast('复制成功')
    },
    onError(){
      this.popupVisible = false;
      this.$Toast('复制失败')
    }
  },
  components: {
    "mt-button":Button,
    "mt-badge":Badge,
    "mt-loadmore":Loadmore,
    "mt-actionsheet":Actionsheet,
    "mt-popup":Popup
  }
}

</script>
<style lang="scss" scoped>
.mint-button--small {
    height: 25px;
}

.activity-detail{
  margin-top: 40px;
  padding-bottom: 56px;
  text-align: left;
  position: relative;
  &-information{
    background-color: white;
    padding: 10px;
    &-title{
      font-weight: bold;
      font-size: 14px;
      &-margin{
        margin-left:5px;
      }
    }
    &-text{
      font-size: 12px;
    }
    &-name{
      font-size: 14px;
      margin-top: 10px;
      padding: 2px;
      border-top: 1px solid #ccc;
      &-img{
        border-radius: 50%;
        width:35px;
        height:35px;
        position: relative;
        top: 8px;
      }
    }
  }
  &-introduce{
    // overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    margin-top: 10px;
  }
  &-peoples{
    margin-top: 10px;
    &-img{
      float:left;
      width:20%;
      img{
        width: 50px;
        height:50px;
        border-radius: 50%;
      }
    }
    &-content{
      position: relative;
      float:left;
      width:75%;
    }
    &-t{
       background-color: white;
       padding:10px; 
    }
    ul{
      padding:10px 10px 0px 10px;
      background-color: white;
      text-align: center;
      li{
        border-bottom: 1px solid #ddd;
        overflow: auto;
        padding: 5px;
        text-align: left;
      }
    }
    &-bg{
      background-color: #EEEEEE;
      font-size: 14px;
      text-align: center;
      color: #bbb;
      text-align: center;
      padding: 5px;
    }
  }
  &-btn{
    position: fixed;
    background-color: #fff;
    bottom: 0px;
    width:100%;
    height:55px;
    display: flex;
    text-align: center;
    font-size: 14px;
    img{
      margin-top:10px;
      width:20px;
    }
    &-btn1{
      flex:1;
    }
    &-btn{
      flex:2;
      color:white;
      font-weight: bold;
      line-height:55px;
      
    }
    &-but1{
       background-color:#ccc;
    }
    &-but2{
      background-color:#FEBF00;
    }
  }
  &-showShareImg{
    background: rgba(150,150,150,0.5);
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    img{
      width:100%;
    }
  }
}
</style>
<style>
.activity-detail-introduce p img{
  width:100%;
}
</style>
